<template>
  <Transition
    name="fade"
  >
    <fireworksOne v-if="index === 0"></fireworksOne>
    <fireworksTwo v-else-if="index === 1"></fireworksTwo>
    <fireworksThree v-else-if="index === 2"></fireworksThree>
    <fireworksFour v-else-if="index===3"></fireworksFour>
  </Transition>
  <div class="fixed left-0 right-0 top-79% mx-auto z-9999 flex items-center justify-center">
    <button class="p-10px rounded-full h-4em w-4em z-9999 flex-none mr-1em" @click="restart">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M22 12c0 6-4.39 10-9.806 10C7.792 22 4.24 19.665 3 16m-1-4C2 6 6.39 2 11.806 2C16.209 2 19.76 4.335 21 8"/><path d="m7 17l-4-1l-1 4M17 7l4 1l1-4"/></g></svg>
    </button>
    <button class="p-10px rounded-full h-4em w-35% left-0 z-9999 flex items-center justify-around" @click="change">
      第{{ index + 1 }}场烟花
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6z"/></svg>
    </button>
  </div>
  <div class="fixed left-0 right-0 bottom-1% flex items-center justify-center pt-4em">
    <audio controls autoplay preload="auto">
      <source src="@/assets/because-of-you.mp3" />
    </audio>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import fireworksOne from "./components/fireworksOne.vue";
import fireworksTwo from "./components/fireworksTwo.vue";
import fireworksThree from "./components/fireworksThree.vue";
import fireworksFour from "./components/fireworksFour.vue";

const tabs = [fireworksOne, fireworksTwo, fireworksThree, fireworksFour];
const index = ref(0);

function change() {
  index.value++;
  if (index.value >= tabs.length) {
    index.value = 0
  }
  console.log(index.value);
}
function restart() {
  index.value = 0
}
</script>

<style scoped>
body {
  height: 100vh;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}
</style>
